<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用bootstrap绘制form表单</title>
<!-- Bootstrap core CSS -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet">
<!-- bootstrap-datepicker-1.9.0-dist -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
	rel="stylesheet">
<!-- 分页插件 -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/paginationjs-master/dist/pagination.css"
	rel="stylesheet">
<!-- 模态框插件 -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/BootstrapEx/css/bootstrapEx.css"
	rel="stylesheet">

<!-- Bootstrap core JavaScript-->
<!-- Placed at the end of the document so the pages load faster -->
<!--import jquery before bootstrap javascript-->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<!-- bootstrap-datepicker-1.9.0-dist -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>

<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- My97DatePicker -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>

<!-- 分页插件 -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/paginationjs-master/dist/pagination.min.js"></script>

<!-- 模态框插件 -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/BootstrapEx/js/bootstrapEx.js"></script>

<script type="text/javascript">
	
	// 删除按钮点击触发的事件:用于发送删除请求
	function deleteMe(p_id) {
		// 使用确认框，确认用户是否需要进行删除操作
		var r = confirm("您确认删除该记录么?")
		if (r == true) {
			// 使用get方式发送请求
			window.location.href = "PhonesInfoAjaxDeleteControl?pid=" + p_id;
		}

	}


	///////////////////////////////////////////////////////////
	///// ajax查询

	function doAjaxQuery() {
		// 使用ajax进行查询
		$
				.ajax({
					// 请求类型
					type : "POST",
					// 请求的url，和form的action属性值一样
					url : "${pageContext.servletContext.contextPath}/PhonesInfoAjaxQueryControl",
					// 发送的表单数据，按照如下格式提供即可："name=John&location=Boston"
					data : $("#form1").serialize(), // 序列化表单参数，获取一个序列化的字符串，用于ajax请求，必须在form中才可以使用
					// response响应的数据类型，默认是文本类型，可以指定为 xml、html、json等类型
					dataType : "json",
					// 回调函数
					success : function(data, textStatus, jqXHR) {

						console.info("回调结果：");
						console.info(data);
						// 进行dom操作，局部修改浏览器的显示数据，进行局部刷新数据
						if (data != null) {
							//console.info("hhhhh");
							// 此处 json对象data是一个数组类型，所有可以使用form循环进行遍历
							/* for(var i=0;i<data.length;i++){
							 console.info(data[i]);
							 // 此处 data[i] 是json对象中的一个元素，该元素是一个一个对象类型，可以使用.操作符获取指定属性的值
							 console.info(data[i].user_Name);
							 console.info(data[i]["user_Name"]);
							} */

							// 逻辑分页（假分页），调用分页插件进行分页处理					
							$('#myPagination')
									.pagination(
											{
												dataSource : data, // 分页的数据源，假分页，给定ajax查询的结果集 data即可
												pageSize : 10, // 每页显示的记录数
												showGoInput : true, // 是否显示 go 跳转输入框
												showGoButton : true, // 是否显示 go 跳转按钮
												// 当前页刷新的回调函数
												callback : function(paginData,
														pagination) {
													// 分页插件的回调函数，主要是每次改变页码之后，就会触发该函数，通过该函数可以局部刷新数据，达到一个分页显示的效果
													// paginData是当前页面需要显示的数据， 回调时，需要把paginData中的数据进行局部渲染，显示当前页的数据内容

													// 进行分页的数据显示，也就是ajax查询的dom操作
													// 组合的html内容穿
													var strHtml = "";
													$
															.each(
																	paginData,
																	function(
																			index,
																			eachVal) {
																		// 此处的eachVal是被遍历的结果集 data中的一个元素
																		// 根据后台封装的结果集结构，eachVal是一个实体类对象

																		strHtml += "<tr>";

																		strHtml += "<th scope='row'>"
																		strHtml += (index + 1);
																		strHtml += "</th>";

																		strHtml += "<td>";
																		strHtml += eachVal.p_name;
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += eachVal.p_fullName;
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += eachVal.p_price;
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += eachVal.p_code;
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += "<img alt='购买界面图片' src='";
										  strHtml+=eachVal.p_buyimg;
										  strHtml+="' width='40px' height='40px'>"
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += "<img alt='订单界面图片' src='";
										  strHtml+=eachVal.p_orderimg;
										  strHtml+="' width='40px' height='40px'>"
																		strHtml += "</td>";

																		strHtml += "<td>";
																		strHtml += eachVal.p_intro;
																		strHtml += "</td>";

																		// 修改按钮
																		strHtml += "<td><button type='button' class='btn btn-default' onclick='doModifyClick("
																				+ eachVal.p_id
																				+ ")'>修改</button></td>";
																		// 删除按钮
																		strHtml += "<td><button type='button' class='btn btn-default' onclick='deleteMe("
																				+ eachVal.p_id
																				+ ")'>删除</button></td>";
																		strHtml += "</tr>";
																	});

													// end each遍历方法
													// 将要显示的html，使用dom操作，添加到tbody标签中
													$("#tbody1").html(strHtml);
												}
											});

						}
					}

				});
	}

	//////////////////////////////////////////////////////////

	//////////////////////////////////////////////////////////////////////

	// 修改按钮的点击事件
	function doModifyClick(p_id) {
		window.location.href = "PhonesInfoAjaxModifyControl?pid=" + p_id;
	}


	/////////////////////////////////////////////////////////////////////
</script>

<style>
#maindiv {
	width: 100%;
	padding-top: 10px;
	/* margin: 0px, auto; */
	padding-left: 35px;
}

#seconddiv {
	width: 80%;
	padding-top: 10px;
	/* margin: 0px, auto; */
	padding-left: 40px;
}
</style>
</head>
<body>
	<div id="maindiv">
		<div id="seconddiv">
			<form id="form1" class="form-horizontal">
				<div class="form-group">
					<label class="col-sm-2 control-label">手机名称</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="name" name="p_name"
							placeholder="手机名称">
					</div>

					<label class="col-sm-2 control-label">手机编码</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="code" name="p_code"
							placeholder="手机编码">
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-2">
						<button type="button" id="btnQuery" class="btn btn-default"
							onclick="doAjaxQuery()">查询</button>
					</div>
					<div class="col-sm-offset-4 col-sm-2">
						<button type="reset" class="btn btn-default">重置</button>
					</div>
				</div>
			</form>
		</div>
		<!-- 显示查询结果部分-->
		<div class="row">

			<table class="table table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>手机名称</th>
						<th>手机全称</th>
						<th>手机价格</th>
						<th>手机编码</th>
						<th>手机购买界面图片</th>
						<th>手机订单界面图片</th>
						<th>手机介绍</th>
					</tr>
				</thead>
				<tbody id="tbody1">
					<!-- 此处根据ajax回调的结果数据集进行动态拼写html的内容 -->
				</tbody>
			</table>

		</div>
		<div class="row">
			<!-- 分页div -->
			<div id="myPagination"></div>
		</div>
	</div>
</body>
</html>